<template>
	<view class="event-coupon">
		<block v-if="show">
			<view class="event-coupon-info">
				<view class="event-coupon-info-left">
					<view class="coupon-price" v-if="couponInfo.type==1">￥<text>{{couponInfo.money}}</text></view>
					<view class="coupon-price" v-if="couponInfo.type==2"><text>{{couponInfo.discount}}</text>折</view>
					<view class="coupon-des" v-if="couponInfo.type==1">满{{couponInfo.satisfy_money}}可用</view>
				</view>
				<view class="event-coupon-info-right">
					<view class="info-tit">{{couponInfo.coupon_name}}</view>
					<view class="info-time">
						有效期:{{couponInfo.begin_time}}-{{couponInfo.stop_time}}
					</view>
				</view>
			</view>
			<view class="event-coupon-btn" @click="receive">领取优惠券</view>
			<view class="event-coupon-btn-1" @click="goHome">去商城看看</view>
			<view class="event-coupon-rule">
				<u-parse :html="couponInfo.content"></u-parse>
			</view>
		</block>
		<uni-popup type="center" ref="receivePop" :maskClick="false">
			<view class="receivePop">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-05-24/20210524/da05b67640ee7b96e63b2fe01767fde5.png"></image>
				<view class="receivePop-tit">领取成功</view>
				<view class="receivePop-countdown"><text>{{count}}秒</text>后进入“家具大师商城”</view>
				<view class="receivePop-des">全场8折购，工厂直购价，助力黑马实验班</view>
				<view class="receivePop-btn" @click="goHome">直接去看看</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				couponInfo: {},
				count: 5,
				coupon_id: ''
			};
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
			if(options.coupon_id){
				this.coupon_id = options.coupon_id
			}
			this.init()
			// 如果用户从分享的小程序卡片或扫描二维码进来的,设置一个url缓存,登录后返回当前缓存url
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
		},
		methods: {
			init(){
				this.$u.api.CouponInfo({coupon_id: this.coupon_id}).then(res => {
					this.show = true
					this.couponInfo = res.datas
				})
			},
			goHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			receive(){
				this.$u.api.CardReceive({coupon_id: this.coupon_id,user_id: JSON.parse(uni.getStorageSync('userInfo')).user_id}).then(res => {
					this.$refs.receivePop.open()
					this.countdown()
				})
			},
			countdown(){
				let countdown = setInterval(() => {
					this.count--
					if(this.count==0){
						clearInterval(countdown)
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	.event-coupon{
		.event-coupon-info{
			display: flex;
			overflow: hidden;
			padding: 30rpx;
			.event-coupon-info-left{
				width: 180rpx;
				height: 150rpx;
				background-color: #F59359;
				border-radius: 8rpx 0 0 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				color: #FFF;
				flex-direction: column;
				.coupon-price{
					text{
						font-size: 80rpx;
					}
				}
			}
			.event-coupon-info-right{
				flex: 1;
				min-width: 0;
				height: 150rpx;
				display: flex;
				background-color: #F8F8F8;
				padding: 0 30rpx;
				flex-direction: column;
				justify-content: center;
				border-radius: 0 8rpx 8rpx 0;
				.info-tit{
					font-weight: bold;
					font-size: 32rpx;
				}
				.info-time{
					color: #999;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
		.event-coupon-btn{
			margin: 0 30rpx;
			line-height: 98rpx;
			background: #F59359;
			border-radius: 8rpx;
			text-align: center;
			color: #FFF;
			font-size: 32rpx;
		}
		.event-coupon-btn-1{
			margin: 40rpx 30rpx 0;
			line-height: 98rpx;
			border: solid 2rpx #000;
			border-radius: 8rpx;
			text-align: center;
			color: #09161E;
			font-size: 32rpx;
		}
		.event-coupon-rule{
			border-top: 20rpx solid #F8F8F8;
			margin-top: 60rpx;
			padding: 30rpx;
		}
		.receivePop{
			width: 650rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			text-align: center;
			padding: 0 45rpx 50rpx;
			image {
				vertical-align: top;
				width: 245rpx;
				height: 245rpx;
				margin: -100rpx auto 0;
			}
			.receivePop-tit{
				font-size: 36rpx;
				font-weight: 800;
			}
			.receivePop-countdown{
				font-size: 32rpx;
				font-weight: 400;
				margin-top: 40rpx;
				text{
					color: #F59359;
				}
			}
			.receivePop-des{
				font-size: 28rpx;
				color: #666;
				margin-top: 40rpx;
			}
			.receivePop-btn{
				font-size: 32rpx;
				color: #F59359;
				font-weight: bold;
				border: solid 2rpx #F59359;
				line-height: 98rpx;
				border-radius: 8rpx;
				margin-top: 60rpx;
			}
		}
	}
</style>
